<template>
  <div class="large">
    <!--顶部-->
    <div class="title">
      <img src="@/assets/images/u154.png" alt="" />
      <p
        style="
          color: #ffffff;
          position: absolute;
          top: -26px;
          left: 850px;
          font-size: 24px;
          cursor: pointer;
        "
        @click="pclick"
      >
        数据决策驾驶舱
      </p>
      <p
        style="
          color: #ffffff;
          position: absolute;
          top: 20px;
          left: 880px;
          font-size: 14px;
        "
      >
        点击标题返回工作
      </p>
    </div>
    <!--中间区域-->
    <div class="content">
      <!--左边-->
      <div class="left">
        <div class="top">
          <img src="@/assets/images/u8.png" alt="" />
          <p>项目统计</p>
          <p>2024-06-06</p>
          <div class="top1">
            <img src="@/assets/images/u3.png" alt="" />
            <img src="@/assets/images/u3.png" alt="" />
            <img src="@/assets/images/u3.png" alt="" />
          </div>
          <div class="top2">
            <p>50</p>
            <p>5</p>
            <p>300</p>
          </div>
          <div class="top3">
            <p>已开工道路里程</p>
            <p>已开工道路数量</p>
            <p>移交的道路里程</p>
          </div>
          <div class="top4">
            <img src="@/assets/images/u145.png" alt="" />
            <img src="@/assets/images/u145.png" alt="" />
            <img src="@/assets/images/u145.png" alt="" />
          </div>
        </div>
        <div class="content">
          <img src="@/assets/images/u8.png" alt="" />
          <p>预警中心</p>
          <p>2024-06-06</p>
          <div class="content1">
            <p style="color: #ffffff; position: absolute; top: 66px">300</p>
            <img src="@/assets/images/u10.png" alt="" />
            <p style="color: #ffffff; position: absolute; left: 100px">200</p>
            <div
              style="
                width: 65px;
                height: 50px;
                position: absolute;
                left: 80px;
                border-top: 1px solid #1818db;
                top: 38px;
                color: #ffffff;
              "
            >
              日报预警
            </div>
            <p style="color: #ffffff; position: absolute; left: 355px">300</p>
            <div
              style="
                width: 65px;
                height: 50px;
                position: absolute;
                left: 345px;
                border-top: 1px solid #1818db;
                top: 39px;
                color: #ffffff;
              "
            >
              扬尘预警
            </div>
            <p
              style="
                color: #ffffff;
                position: absolute;
                left: 250px;
                bottom: -12px;
              "
            >
              100
            </p>
            <div
              style="
                width: 65px;
                height: 50px;
                position: absolute;
                left: 235px;
                border-top: 1px solid #1818db;
                top: 194px;
                color: #ffffff;
              "
            >
              道路预警
            </div>
          </div>
        </div>
        <div class="bottom">
          <img src="@/assets/images/u8.png" alt="" />
          <p>项目类型</p>
          <p>2024-06-06</p>
        </div>
        <Option style="margin-left: 40px"></Option>
      </div>
      <!--中间区域---->
      <div class="middle">
        <div class="p1"></div>
        <div class="p2"></div>
        <div class="p3"></div>
        <div class="p4"></div>
        <div class="middle1">
          <img src="@/assets/images/下载.png" alt="" />
          <img src="@/assets/images/u3.png" alt="" />
          <div class="z1">
            <p>主干道道路建设项目</p>
            <p>设备编码｜123334|PM10 23|PM 2.5 23</p>
          </div>
          <div class="A1">
            <p>AQI指数｜80 空气质量 优</p>
            <div></div>
          </div>
        </div>
        <div class="middle2">
          <div class="left">
            <img src="@/assets/images/u8.png" alt="" />
            <p>劳工统计</p>
            <p>2024-06-06</p>
            <p>单位:人</p>
            <Option5 style="position: absolute; bottom: -20px; left: 52px" />
          </div>
          <div class="right">
            <img src="@/assets/images/u8.png" alt="" />
            <p>考勤统计</p>
            <p>2024-06-06</p>
            <Option4 style="position: absolute; bottom: 0px; left: 552px" />
          </div>
        </div>
      </div>
      <!--右边-->
      <div class="right">
        <div class="top">
          <img src="@/assets/images/u8.png" alt="" />
          <p>进度监控</p>
          <p>2024-06-06</p>
          <Option1 style="position: absolute; top: 30px; left: 40px" />
        </div>
        <div class="content">
          <img src="@/assets/images/u8.png" alt="" />
          <p>资金来源统计</p>
          <p>2024-06-06</p>
          <Option2 style="position: absolute; top: 66px; left: 66px" />
        </div>
        <div class="bottom">
          <img src="@/assets/images/u8.png" alt="" />
          <p>扬尘监测设备统计</p>
          <p>2024-06-06</p>
          <Option3 style="position: absolute; top: 30px; left: 30px" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Option from "./components/option.vue";
import Option1 from "./components/option1.vue";
import Option2 from "./components/option2.vue";
import Option3 from "./components/option3.vue";
import Option4 from "./components/option4.vue";
import Option5 from "./components/option5.vue";
export default {
  components: {
    Option,
    Option1,
    Option2,
    Option3,
    Option4,
    Option5,
  },
  data() {
    return {};
  },
  methods: {
    pclick() {
      this.$router.push("index");
    },
  },
};
</script>
<style>
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
<style lang="scss" scoped>
.large {
  width: 1920px;
  height: 1080px;
  background: url("../../assets/images/u1.svg");
  .title {
    width: 100%;
    height: 82px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .content {
    height: calc(100% - 82px);
    display: flex;
    .left {
      // flex-grow: 1;
      width: 480px;
      display: flex;
      flex-wrap: wrap;
      position: relative;
      .top {
        width: 480px;
        height: 320px;
        position: relative;
        // display: flex;
        img {
          width: 100%;
          height: 100%;
        }
        > p:nth-of-type(1) {
          position: absolute;
          font-weight: 400;
          font-size: 16px;
          color: #ffffff;
          top: 5px;
          left: 100px;
        }
        > p:nth-of-type(2) {
          font-weight: 400;
          font-size: 15px;
          color: #ffffff;
          position: absolute;
          top: 2px;
          right: 83px;
          border: 1px solid #1818db;
        }
        .top1 {
          width: 460px;
          display: flex;
          justify-content: space-evenly;
          position: absolute;
          top: 70px;
          img {
            width: 120px;
            height: 120px;
            animation: spin 5s linear infinite; /* 2秒旋转一圈，匀速，无限循环 */
          }
        }
        .top2 {
          font-weight: 650;
          font-size: 24px;
          color: #ffffff;
          display: flex;
          justify-content: space-evenly;
          position: relative;
          width: 384px;
          > p:nth-of-type(1) {
            position: absolute;
            top: -230px;
            left: 70px;
          }
          > p:nth-of-type(2) {
            position: absolute;
            top: -230px;
            left: 224px;
          }
          > p:nth-of-type(3) {
            position: absolute;
            top: -230px;
            right: -10px;
          }
        }
        .top3 {
          width: 470px;
          display: flex;
          justify-content: space-evenly;
          position: absolute;
          top: 190px;
          color: #ffffff;
          font-size: 12px;
        }
        .top4 {
          width: 460px;
          display: flex;
          justify-content: space-evenly;
          position: absolute;
          bottom: 14px;
          left: 6px;
          img {
            width: 180px;
            height: 110px;
          }
        }
      }
      .content {
        width: 480px;
        height: 320px;
        position: relative;
        margin-top: -66px;
        img {
          width: 100%;
          height: 100%;
        }
        > p:nth-of-type(1) {
          position: absolute;
          font-weight: 400;
          font-size: 16px;
          color: #ffffff;
          top: 5px;
          left: 100px;
        }
        > p:nth-of-type(2) {
          font-weight: 400;
          font-size: 15px;
          color: #ffffff;
          position: absolute;
          top: 2px;
          right: 83px;
          border: 1px solid #1818db;
        }
        .content1 {
          width: 490px;
          display: flex;
          justify-content: space-evenly;
          position: absolute;
          top: 70px;
          img {
            width: 200px;
            height: 200px;
          }
        }
      }
      .bottom {
        width: 480px;
        height: 320px;
        // position: relative;
        position: absolute;
        bottom: 16px;
        img {
          width: 100%;
          height: 100%;
        }
        > p:nth-of-type(1) {
          position: absolute;
          font-weight: 400;
          font-size: 16px;
          color: #ffffff;
          top: 5px;
          left: 100px;
        }
        > p:nth-of-type(2) {
          font-weight: 400;
          font-size: 15px;
          color: #ffffff;
          position: absolute;
          top: 2px;
          right: 83px;
          border: 1px solid #1818db;
        }
      }
    }
    .middle {
      // background: yellow;
      flex-grow: 2;
      position: relative;
      // background: url("../../assets/images/u3.png");
      .p1 {
        width: 70px;
        height: 70px;
        border-top: 1px solid #1818db;
        border-left: 1px solid #1818db;
        border-top-left-radius: 8px;
        position: absolute;
        top: 15px;
        left: 70px;
      }
      .p2 {
        width: 70px;
        height: 70px;
        border-top: 1px solid #1818db;
        border-right: 1px solid #1818db;
        border-top-right-radius: 8px;
        position: absolute;
        top: 15px;
        right: 70px;
      }
      .p3 {
        width: 70px;
        height: 70px;
        border-bottom: 1px solid #1818db;
        border-left: 1px solid #1818db;
        border-bottom-left-radius: 8px;
        position: absolute;
        top: 550px;
        left: 70px;
      }
      .p4 {
        width: 70px;
        height: 70px;
        border-bottom: 1px solid #1818db;
        border-right: 1px solid #1818db;
        border-bottom-right-radius: 8px;
        position: absolute;
        top: 550px;
        right: 70px;
      }
      .middle1 {
        height: 460px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-bottom: 206px;
        > img:nth-of-type(1) {
          width: 700px;
          height: 430px;
          position: absolute;
          top: 76px;
        }
        > img:nth-of-type(2) {
          position: absolute;
          width: 600px;
          height: 600px;
          top: 0;
          animation: spin 5s linear infinite;
        }
        .A1 {
          font-weight: 650;
          color: #ffffff;
          position: relative;
          width: 200px;
          height: 50px;
          p {
            position: absolute;
            top: 340px;
          }
          > div {
            background: linear-gradient(
              90deg,
              rgba(217, 0, 27, 1) 0%,
              rgba(245, 154, 35, 1) 25%,
              rgba(255, 255, 0, 1) 38%,
              rgba(2, 167, 240, 1) 65%,
              rgba(4, 217, 25, 1) 100%
            );
            width: 200px;
            height: 6px;
            position: absolute;
            top: 380px;
            border-radius: 10px;
            left: -8px;
          }
        }
        .z1 {
          width: 220px;
          height: 80px;
          border: 1px solid #0a00ff;
          color: #ffffff;
          position: absolute;
          border-width: 1px;
          top: 30px;
          right: 110px;
          > p:nth-of-type(1) {
            margin-top: 12px;
            margin-left: 5px;
          }
          > p:nth-of-type(2) {
            margin-top: 5px;
            margin-left: 5px;
            font-size: 12px;
          }
        }
      }
      .middle2 {
        // height: calc(100% - 460px);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        .left {
          width: 480px;
          height: 320px;
          img {
            width: 100%;
            height: 100%;
          }
          > p:nth-of-type(1) {
            position: absolute;
            font-weight: 400;
            font-size: 16px;
            color: #ffffff;
            top: 5px;
            left: 100px;
          }
          > p:nth-of-type(2) {
            font-weight: 400;
            font-size: 15px;
            color: #ffffff;
            position: absolute;
            top: 2px;
            right: 83px;
            border: 1px solid #1818db;
          }
          > p:nth-of-type(3) {
            font-weight: 400;
            font-size: 15px;
            color: #ffffff;
            position: absolute;
            top: 50px;
            right: 50px;
            // border: 1px solid #1818db;
          }
        }
        .right {
          width: 480px;
          height: 320px;
          img {
            width: 100%;
            height: 100%;
          }
          > p:nth-of-type(1) {
            position: absolute;
            font-weight: 400;
            font-size: 16px;
            color: #ffffff;
            top: 5px;
            left: 580px;
          }
          > p:nth-of-type(2) {
            font-weight: 400;
            font-size: 15px;
            color: #ffffff;
            position: absolute;
            top: 2px;
            right: 83px;
            border: 1px solid #1818db;
          }
        }
      }
    }
    .right {
      // flex-grow: 1;
      width: 480px;
      display: flex;
      flex-wrap: wrap;
      .top {
        width: 480px;
        height: 320px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        > p:nth-of-type(1) {
          position: absolute;
          font-weight: 400;
          font-size: 16px;
          color: #ffffff;
          top: 4px;
          right: 310px;
        }
        > p:nth-of-type(2) {
          font-weight: 400;
          font-size: 15px;
          color: #ffffff;
          position: absolute;
          top: 4px;
          right: 83px;
          border: 1px solid #1818db;
        }
      }
      .content {
        width: 480px;
        height: 320px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        > p:nth-of-type(1) {
          position: absolute;
          font-weight: 400;
          font-size: 16px;
          color: #ffffff;
          top: 4px;
          right: 283px;
        }
        > p:nth-of-type(2) {
          font-weight: 400;
          font-size: 15px;
          color: #ffffff;
          position: absolute;
          top: 4px;
          right: 90px;
          border: 1px solid #1818db;
        }
      }
      .bottom {
        width: 480px;
        height: 320px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        > p:nth-of-type(1) {
          position: absolute;
          font-weight: 400;
          font-size: 16px;
          color: #ffffff;
          top: 4px;
          right: 256px;
        }
        > p:nth-of-type(2) {
          font-weight: 400;
          font-size: 15px;
          color: #ffffff;
          position: absolute;
          top: 4px;
          right: 83px;
          border: 1px solid #1818db;
        }
      }
    }
  }
}
</style>
